<template>
  <div class="userList">
    <el-table
      :data="tableData"
      style="width: 100%; overflow-y: auto;"
      height="80vh"
    >
      <el-table-column prop="id" label="ID" width="100" />
      <el-table-column prop="title" label="标题" />
      <el-table-column prop="time" label="投稿时间" width="200" />
      <el-table-column fixed="right" label="操作" width="120">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click="showNews(scope.row, scope.$index)"
          >
            审阅
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <Pagination
      :total="len"
      :limit.sync="limit"
      :page="page"
      @pagination="getList"
    />
    <el-dialog
      :visible.sync="visibleNews"
      width="30%"
      :fullscreen="true"
      center
    >
      <News :content="dialogContent" />
      <el-form
        ref="form"
        :model="auditForm"
        label-width="100px"
        style="height: 100px;"
      >
        <el-form-item label="是否通过审核">
          <el-switch
            v-model="auditForm.audit"
            style="display: block;"
            inactive-color="#ff4949"
            active-color="#13ce66"
            active-text="通过"
            inactive-text="不通过"
          />
        </el-form-item>
        <el-form-item label="不通过原因">
          <el-input
            v-model="auditForm.reason"
            :rows="2"
            :disabled="auditForm.audit"
            type="textarea"
          />
        </el-form-item>
      </el-form>
      <span slot="title">{{ dialogTitle }}</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="visibleNews = false">取 消</el-button>
        <el-button type="primary" @click="submitAudit">提 交</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import waves from '@/directive/waves'
import Pagination from '@/components/Pagination'
import News from '@/components/news'
import { getAuditNews, getNews, postAudit } from '@/api/news'
export default {
  name: 'Audit',
  directives: { waves },
  components: { Pagination, News },
  data() {
    return {
      dialogTitle: '1',
      dialogContent: '',
      dialogIndex: -1,
      auditForm: {
        id: '',
        audit: false,
        reason: ''
      },
      visibleNews: false,
      page: 1,
      limit: 10,
      len: 100,
      tableData: []
    }
  },
  created() {
    this.getList({ page: this.page, limit: this.limit })
  },
  methods: {
    async showNews(row, index) {
      this.visibleNews = true
      const result = await getNews({ id: row.id })
      if (result.code === 1) {
        this.auditForm.id = row.id
        this.dialogTitle = result.data.title
        this.dialogContent = result.data.content
        this.dialogIndex = index
      }
    },
    async getList({ page = this.page, limit = this.limit }) {
      const result = await getAuditNews({
        page,
        limit
      })
      if (result.code === 1) {
        this.tableData = result.data
        this.len = result.len
      }
    },
    async submitAudit() {
      const result = await postAudit({
        ...this.auditForm
      })
      if (result.code === 0) {
        this.$message({
          message: '审阅成功',
          type: 'success'
        })
        this.tableData.splice(this.dialogIndex, 1)
        this.dialogIndex = -1
      } else {
        this.$message({
          message: result.msg,
          type: 'error'
        })
      }
      this.visibleNews = false
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>

<style lang="scss" scoped>
@import '~@/styles/mixin.scss';
.userList {
  padding: 20px;
}
/deep/ .el-switch {
  $height: 40px;
  height: $height;
  line-height: $height;
  .el-switch__label {
    height: $height;
  }
  @include flexCenter();
}
/deep/ .el-table__body-wrapper {
  @include scrollBar();
}
</style>
